<template>
	<view>
		<zl-address :color="color" :addressList="addressList" @choose="choose" :attr="attr"
		    @edit="edit" @del="del"></zl-address>
			
		<view class="save">
		    <view class="btn" :style="'background:' + color" @tap="add">添加地址</view>
		</view>
	</view>
</template>

<script>
	import { getUserAddress,deleteUserAddress } from '@/api/api.js'
	
    export default {
        data() {
            return {
                color: '#FF5722',
                addressList: [],
                attr:{
                    is_default:'is_default',
                    reciver_name:'reciver_name',
                    mobile:'mobile',
                    address:'address',
                    details:'details'
                }
            };
        },
        mounted() {
        },
        onShow() {
            this.getAddress()
        },
        props: {},
        methods: {
            getAddress(){
				getUserAddress().then(res => {
					this.addressList = res.data
				})
            },
            // 编辑地址
            edit(item) {
				uni.navigateTo({
				    url: `/pagesA/pages/address/add?id=${item.id}`
				})
            },
            choose(item){
                console.log(item)
            },
            del(item, index) {
				deleteUserAddress(item.id).then(_ => {
					uni.showToast({
					    title: '删除成功~',
					    icon: 'none'
					})
					this.addressList.splice(index, 1)
				})
            },
            // 增加地址
            add() {
                uni.navigateTo({
                    url: '/pagesA/pages/address/add'
                })
            },
        }
    };
</script>
<style lang="scss" scoped>
    .save {
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 120upx;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .save view {
        display: flex;
    }

    .save .btn {
        box-shadow: 0upx 5upx 10upx rgba(0, 0, 0, 0.4);
        width: 70%;
        height: 80upx;
        border-radius: 80upx;
        background-color: #f23a3a;
        color: #fff;
        justify-content: center;
        align-items: center;
        font-size: 30upx;
        margin-bottom: 60px;
    }
</style>